<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Progress</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
</head>
<body>

<!--
属性 lay-percent ：代表进度条的初始百分比

通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示，支持：普通数字、百分数、分数（layui 2.1.7 新增）
如果不想显示，千万别设置no或者false，直接剔除该属性即可


-->
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main" style="margin-top: 20px">

            <div id="LAY_preview">

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>默认风格的进度条</legend>
                </fieldset>

                <div class="layui-progress">
                    <div class="layui-progress-bar" lay-percent="40%"></div>
                </div>
                <div style="margin-top: 15px; width:300px">
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="70%"></div>
                    </div>
                </div>

                <br>
                温馨提示：进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>更多颜色选取</legend>
                </fieldset>

                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
                </div>

                <br>

                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
                </div>

                <br>

                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
                </div>

                <br>

                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
                </div>

                <br>

                <div class="layui-progress">
                    <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
                </div>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>大尺寸进度条</legend>
                </fieldset>
                <div class="layui-progress layui-progress-big">
                    <div class="layui-progress-bar" lay-percent="20%"></div>
                </div>

                <br>
                <div class="layui-progress layui-progress-big">
                    <div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
                </div>
                <br>
                <div class="layui-progress layui-progress-big">
                    <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
                </div>

                <fieldset class="layui-elem-field layui-field-title" style="margin: 50px 0 30px;">
                    <legend>显示进度比文本</legend>
                </fieldset>
                <div class="layui-progress" lay-showPercent="true">
                    <div class="layui-progress-bar" lay-percent="20%"></div>
                </div>

                <br>

                <div class="layui-progress" lay-showPercent="true">
                    <div class="layui-progress-bar" lay-percent="5 / 10"></div>
                </div>

                <br>

                <div class="layui-progress layui-progress-big" lay-showPercent="true">
                    <div class="layui-progress-bar" lay-percent="70%"></div>
                </div>

                <br>
                正如你上述看到的，除了百分数，还支持分数（layui 2.1.7 新增）

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>动态改变进度</legend>
                </fieldset>

                <div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="demo">
                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                </div>

                <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
                    <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
                    <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
  layui.use(['element'], function () {
    var element = layui.element;
    var $ = layui.jquery

    //触发事件
    var active = {
      setPercent: function () {
        //设置50%进度
        element.progress('demo', '50%')
      }
      , loading: function (othis) {
        var DISABLED = 'layui-btn-disabled';
        if (othis.hasClass(DISABLED)) return;

        //模拟loading
        var n = 0, timer = setInterval(function () {
          n = n + Math.random() * 10 | 0;
          if (n > 100) {
            n = 100;
            clearInterval(timer);
            othis.removeClass(DISABLED);
          }
          element.progress('demo', n + '%');
        }, 300 + Math.random() * 1000);

        othis.addClass(DISABLED);
      }
    };

    $('.site-demo-active').on('click', function () {
      var othis = $(this), type = $(this).data('type');
      active[type] ? active[type].call(this, othis) : '';
    });

  })
</script>
</body>
</html>